<template>
	<!-- Drawer 组件 -->
	<transition>
		<div class="ly-drawer w-full h-full fixed left-0 top-0 z-50" v-show="modelValue">
			<!-- 点击蒙层关闭 Drawer -->
			<div
				class="modal w-full h-full absolute left-0 top-0"
				@click="$emit('update:modelValue', false)"></div>
			<div
				class="content w-fit h-full duration-300 bg-white dark:bg-gray-800 absolute left-0 top-0 z-30">
				<slot></slot>
			</div>
		</div>
	</transition>
</template>

<script lang="ts">
export default defineComponent({
	name: 'LyDrawer',
	props: {
		modelValue: {
			type: Boolean,
			required: true,
		},
	},
	emits: ['update:modelValue'],
	setup(props, { emit }) {
		// 可视状态
		const drawerVisible = ref<boolean>(props.modelValue);
		watch(drawerVisible, (val: boolean) => {
			emit('update:modelValue', val);
		});

		return {
			drawerVisible,
		};
	},
});
</script>

<style lang="scss" scoped>
.ly-drawer {
	backdrop-filter: blur(3px);
	background-color: rgba(0, 0, 0, 0.5);
}
</style>
